<template lang="html">
	<div id="coming">
		<!-- loading -->
		<div v-if="!loading" class="loading_show">
			<mt-spinner type="fading-circle" :size="100" color="#ff7ba0"></mt-spinner>
		</div>
		<!-- coming movies -->
		<div class="film_list">
			<div class="film_item clearfix " v-for="item in movies" v-on:click="gotodetails(item.id)">
				<div class="item_cover fl"><img :src="item.poster.origin" alt=""></div>
				<div class="film_score fr">
					<div class="buy_now">
						预售
					</div>
				</div>
				<div class="film_info">
					<div class="film_name">
						{{item.name}}
					</div>
					<div class="film_intro">
						{{item.intro}}
					</div>
					<div class="coming_time">
						<span>{{format(item.premiereAt)}}</span>
						<span>{{day}}</span>
					</div>
				</div>

			</div>
		</div>

	</div>
</template>

<script>
	// 引入axios插件
	import axios from "axios";

	export default {
		created: function() {
			var that = this;

			// 当index被引入渲染时，就开始发起请求
			axios
				.get("https://m.maizuo.com/v4/api/film/coming-soon/", {
					params: {
						count: that.get_count
					}
				})
				.then(function(res) {
					that.loading = true;

					that.movies = res.data.data.films;
				})
				.catch(function(err) {
					console.warn(err);
				});
		},

		mounted() {
			window.addEventListener("scroll", this.get_more);
		},

		destroyed() {
			window.removeEventListener("scroll", this.get_more);
		},

		data: function() {
			return {
				movies: [],
				day: "",
				get_count: 6,
				loading: false
			};
		},
		methods: {
			format: function(time) {
				var coming_time = new Date(time);
				var year = coming_time.getFullYear();
				var month = coming_time.getMonth() + 1;
				var date = coming_time.getDate();
				return year + "年" + month + "月" + date + "日";
			},
			gotodetails: function(movies_id) {
				var that = this;
				that.movies_id = movies_id;
				// console.log(that.movies_id);
				this.$router.push({
					path: "details",
					query: {
						id: that.movies_id
					}
				});
			},
			get_more: function() {
				var that = this;
				if(that.get_count < 101) {
					that.get_count += 5;
					// 滚动获取新的电影信息
					axios.get("https://m.maizuo.com/v4/api/film/coming-soon/", {
							params: {
								count: that.get_count
							}
						})
						.then(function(res) {
							// console.log(res);
							that.movies = res.data.data.films;
						});
				}

			}
		}
	};
</script>

<style lang="scss">
	@font-face {
		font-family: "iconfont";
		/* project id 541017 */
		src: url("//at.alicdn.com/t/font_541017_oo9tyx023f28olxr.eot");
		src: url("//at.alicdn.com/t/font_541017_oo9tyx023f28olxr.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_541017_oo9tyx023f28olxr.woff") format("woff"), url("//at.alicdn.com/t/font_541017_oo9tyx023f28olxr.ttf") format("truetype"), url("//at.alicdn.com/t/font_541017_oo9tyx023f28olxr.svg#iconfont") format("svg");
	}
	
	.iconfont {
		font-family: "iconfont";
		font-size: 12px;
		font-style: normal;
		color: #fff;
	}
	
	#coming {
		.buy_now {
			margin-top: 3vh;
			background-color: #55c2ff;
		}
	}
</style>